<template>
	<view class="login">
		<view class="headText">
			你好，<br/>
			欢迎使用湖北新华教育服务平台
		</view>
		<view class="l-tabs">
			<div class="l-tab active">密码重置</div>
		</view>
		<view class="l-con">
			<view class="l-row">
				<view class="l-label"> 
				  <text class="iconfont icon-shouji"></text>
				  <text class="l-l-name">手机号</text>
				</view>
				<view class="l-inputbox">
					<input type="text" class="l-l-input" placeholder="请输入您的手机号">
				</view>
			</view>
			<view class="l-row">
				<view class="l-label"> 
				  <text class="iconfont icon-mima"></text>
				  <text class="l-l-name">验证码</text>
				</view>
				<view class="l-inputbox l-code" >
					<input type="text" class="l-l-input" placeholder="请输入您的验证码">
					<text class="warring">获取验证码</text>
				</view>
			</view>
			<view class="l-row">
				<view class="l-label"> 
				  <text class="iconfont icon-mima"></text>
				  <text class="l-l-name">密码</text>
				</view>
				<view class="l-inputbox">
					<input type="text" class="l-l-input" placeholder="请输入您的密码">
				</view>
			</view>
			<view class="forgetBox">
				<view class="forget-i pull-left"><text class="warring">登录已有账号</text></view>
			</view>
			<view class="btBox">
				<view class="bt bt-a">登 录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:0
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.pull-left {
		float: left;
	}
	.pull-right {
		float:right;
	}
	.uni-input-placeholder {
		color:#b3b3b3;
	}
	.login {
		height: 100%;
		width: 100%;
		background-image: url('../../static/img/login-bg.jpg');
		// background-color: #f7624f;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
   .headText {
	   	color:#fff;
		padding: 96rpx 0rpx 11rpx;
		font-size: 40rpx;
		line-height: 1.8;
		font-weight: 550;
		width: 568rpx;
		margin: 0 auto;
   }
   .l-tabs {
	   width: 100%;
	   display: flex;
	   .l-tab {
		   width: 50%;
		   opacity: 0.6;
		   height: 110rpx;
		   text-align: center;
		   line-height: 110rpx;
		   color:#fff;
		   font-size: 32rpx;
		   &.active {
			   opacity: 1;
		   }
	   }
   }
   .l-con {
	   background-color: #fff;
	   border-radius: 56rpx;
	   padding: 22rpx 62rpx 0;
	   .l-label {
		   margin-bottom: 18rpx;
	   }
	   .l-row {
		   padding-top: 40rpx;
		   .l-l-name {
			   font-size: 36rpx;
			   position: relative;
			   top:-4rpx;
		   }
		   .iconfont {
			   color:$color-primary;
			   font-size: 48rpx;
			   margin-right: 20rpx;
		   }
	   }
	   .l-inputbox {
		   padding: 22rpx 0;
		   border-bottom: 1px solid #e6e6e6;
		   &.l-code {
			    display: flex;
				justify-content: space-between;
				.warring {
					color:#f24545;
				}
			  .l-l-input {
			  	width: 260rpx;		   
			  } 
		   }
		   .l-l-input {
			   
		   }
	   }
	   .forgetBox {
		   width: 100%;
		   overflow: hidden;
		   padding-top: 35rpx;
		   .forget-i {
			   flex:none;
			   .warring {
				   color:#f24545;
			   }
		   }
	   }
	   .btBox {
		      padding-top: 170rpx;
		   .bt.bt-a {
			  font-size: 36rpx;
			  background-color: #fff;
			  border:1px solid transparent;
			  background-image: linear-gradient(to right, #ff947b, #f34a48)
		   }
		   @include bt-s-1();
	   }
   }
</style>
